<!-- 菜谱分类页 -->
<template>
	<view class="u-wrap">
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
		    <block slot="backText">返回</block>
		    <block slot="content">分类</block>
		</cu-custom>
		<!--搜索框-->
		<view class="search" @click="toSearch()">
			<u-search disabled placeholder="搜菜谱" shape="square" :showAction="false" inputAlign="center" height="40"></u-search>
		</view>
		
		<view class="u-menu-wrap">
			<!-- 侧边垂直导航栏 -->
			<scroll-view scroll-y class="u-tab-view">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
				 :data-current="index" @tap.stop="swichMenu(index)">
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>
			<!-- 中间显示分类细项的部分 -->
			<block v-for="(item,index) in tabbar" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current==index">
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<text>{{item.name}}</text>
							</view>
							<!-- 显示食材的分类细项 -->
							<view class="item-container-ingre" v-if="current==ingreNum">
								<view class="box-ingre" v-for="(item1, index1) in item.list" :key="index1">
									<view class="box-ingre-name">
										<view class="line"></view>
										<view class="name">
											<view class="text">{{item1.itemName}}</view>
										</view>
									</view>
									<view class="ingre-item">
										<view class="thumb-box" v-for="(item2,index2) in item1.list" :key="index2">
											<image class="item-menu-image" :src="item2.image" mode=""></image>
											<view class="item-menu-name">{{item2.ingreName}}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 显示其他分类细项 -->
							<view class="item-container-other" v-else>
								<view class="thumb-box" v-for="(item1, index1) in item.list" :key="index1">
									<image class="item-menu-image" :src="item1.image" mode=""></image>
									<view class="item-menu-name">{{item1.itemName}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<script>
	import classifyData from "@/common/classify.data.js";//是本地模拟的数据
	export default {
		data(){
			return{
				tabbar: classifyData,
				current: 0, // 预设当前项的值
				ingreNum: -1
			}
		},
		methods:{
			//点击搜索框，跳转搜索页
			toSearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			// 点击左边的栏目切换
			async swichMenu(index) {
				if(index == this.current) return ;
				this.current = index;
				// 当点到“食材”分类项时，改变原先布局
				if(this.tabbar[index].name=="食材"){
					this.ingreNum = index;
				}
			},
			// 使用接口获取分类数据
			async getSortList(){
				const res = await this.$myRequest({
					url:'mock/669879/api/sort'
				})
				this.tabbar = res.data.data
				console.log(this.tabbar)
			}
		},
		onLoad(){
			this.getSortList()
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.search{
		background-color: #F56C6C;
		padding: 10px 40px;
	}
	scroll-view ::-webkit-scrollbar{
		display: none;
	}
	.u-wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
		.u-menu-wrap{
			display: flex;
			height: 100%;
			flex: 1;
			overflow: hidden;
			.u-tab-view {
				width: 200rpx;
				height: 100%;
				.u-tab-item {
					height: 110rpx;
					background: #f6f6f6;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #444;
					font-weight: 400;
					line-height: 1;
				}
				.u-tab-item-active {
					position: relative;
					color: #000;
					font-size: 30rpx;
					font-weight: 600;
					background: #fff;
				}
			}
			.right-box {
				background-color: rgb(250, 250, 250);
				height: 100%;
				.page-view {
					padding: 16rpx;
					.class-item {
						margin-bottom: 30rpx;
						background-color: #FFFFFF;
						padding: 16rpx;
						border-radius: 8rpx;
						.item-title {
							font-size: 32rpx;
							//color: $u-main-color;
							font-weight: bold;
							margin-bottom: 20rpx;
						}
						.item-container-other {
							display: flex;
							flex-wrap: wrap;
							width: 100%;
							.thumb-box {
								width: 33.333333%;
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;
								margin-top: 20rpx;
								margin-bottom: 20rpx;
								.item-menu-image {
									width: 120rpx;
									height: 120rpx;
									border-radius: 60rpx;
								}
								.item-menu-name {
									margin-top: 14rpx;
									font-weight: normal;
									font-size: 30rpx;
									// color: $u-main-color;
								}
							}
						}
						.item-container-ingre {
							display: flex;
							flex-direction: column;
							width: 100%;
							// flex-wrap: wrap;
							.box-ingre{
								display: flex;
								flex-direction: column;
								.box-ingre-name{
									display: flex;
									width: 90%;
									// background: #CCCCCC;
									height: 20px;
									margin: 20rpx auto;
									background-size: cover;
									position: relative;
									justify-content: center;
									align-items: center;
									
									.name{
										position: absolute;
										z-index: 1;
										display: flex;
										align-items: center;
										justify-content: center;
										.text{
											background: #FFFFFF;
											padding: 0 20px;
											// color: #b40407;
											color: $shop-color;
											font-size: 30rpx;
										}
									}
									.line{
										display: inline-block;
										width: 100%;
										border: 1rpx solid #CCCCCC;
										position: absolute;
									}
								}
								.ingre-item{
									display: flex;
									flex-wrap: wrap;
									.thumb-box {
										width: 33.333333%;
										display: flex;
										align-items: center;
										justify-content: center;
										flex-direction: column;
										margin-top: 20rpx;
										margin-bottom: 20rpx;
										.item-menu-image {
											width: 120rpx;
											height: 120rpx;
											border-radius: 60rpx;
										}
										.item-menu-name {
											font-weight: normal;
											font-size: 30rpx;
											// color: $u-main-color;
										}
									}
								}
							}
						}
					}
				}	
			}
		}
	}
</style>
